<script setup>
import { onMounted, nextTick, ref, reactive, watch, computed, watchEffect } from 'vue'
import { searchAllFile, uploadFile, inboundCSVFile ,removeUploadFile} from '@/network/net';
import { ElMessage } from 'element-plus'
// import { bmInfo } from '@/stores/chun';

let bm = sessionStorage.getItem("bm");
let bmInfo = sessionStorage.getItem("bmInfo");

bm = ref(bm);
bmInfo = ref(JSON.parse(bmInfo));

let token = sessionStorage.getItem("token");

onMounted(() => {
  initAllFile()
})

const initAllFile = () => {
  searchAllFile(token).then(res => {
    if (res.data.code == 200) {
      tableData.value = res.data.data.map(item => {
        return {
          id: item.id,
          filename: item.filename,
          filepath: item.filepath,
          department: item.department.name,
          status: item.status
        }
      })
    }
  });
}

const tableData = ref([]);
const handleChange = (file) => {
  let formData = new FormData()
  formData.append('file', file.raw)
  formData.append('name', file.name)
  formData.append('size', file.size)
  formData.append('type', file.type)
  uploadFile(token, {
    file: formData
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success('上传成功')
      initAllFile()
    }
  })
};

const handleRk = (row) => {

  inboundCSVFile(token, {
    file: row.filepath
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success('入库成功')
      initAllFile()
    }
  })
}

const deleteRow = (index) => {
  let id = tableData.value[index].id
  removeUploadFile(token, {
    id: id
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success('删除成功')
      initAllFile()
    }
  })
}
</script>

<template>
  <div id="csv">
    <div id="header">
      <!-- 上传文件按钮 -->
      <el-upload class="upload-demo" :on-change="handleChange" :auto-upload="false" :show-file-list="false">
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <el-button type="primary" size="">点击上传</el-button>
      </el-upload>
    </div>
    <div id="content">
      <el-table :data="tableData" style="width: 100%; margin-bottom: 10px" row-key="id" border
        :tree-props="{ children: 'permissionList' }" stripe>
        <el-table-column prop="filename" label="文件名" sortable />
        <el-table-column prop="filepath" label="文件路径" sortable />
        <el-table-column prop="department" label="所属部门" sortable />
        <el-table-column prop="status" label="状态" sortable>
          <!-- tag 入库为1 未入库为0 -->
          <template #default="{ row }">
            <el-tag v-if="row.status == 1" type="success">已入库</el-tag>
            <el-tag v-else type="danger">未入库</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleRk(scope.row)" v-if="scope.row.status == 0">
              入库
            </el-button>
            <!-- 删除 -->
            <el-button type="danger" size="small" @click="deleteRow(scope.$index)" v-if="scope.row.status == 0&&bmInfo.length>1">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="less" scoped>
#csv {
  padding: 5px;

  .upload-demo {
    margin-bottom: 10px;
  }
}
</style>
